<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      #clock {
        width: 317px;
        height: 157px;
        background: url(./imgs/LED.png) no-repeat;
        background-size: contain;
        display: flex;
      }
      #clock span {
        flex-grow: 1;
        color: white;

        display: flex;
      }
    </style>
  </head>
  <body>
    <div id="clock">
      <span id="h">
        <img src="./imgs/countdown0.png" alt="" />
        <img src="./imgs/countdown1.png" alt="" />
      </span>
      <span> <img src="./imgs/dot.png" alt="" /></span>
      <span id="m">20</span>
      <span> <img src="./imgs/dot.png" alt="" /></span>
      <span id="s">30</span>
    </div>
    <script>
      function clock(el) {
        // 1. 每隔1s获取一次当前时间
        setInterval(() => {
          const d = new Date();
          // 2. 获取时分秒
          const h = d.getHours();
          const m = d.getMinutes();
          const s = d.getSeconds();
          // 3. 添加前导零
          const H = h < 10 ? `0${h}` : h;
          const M = m < 10 ? `0${m}` : m;
          const S = s < 10 ? `0${s}` : s;

          // 4. 将获取的时间添加到对应的DOM节点
          const elH = document.getElementById("h");
          const elM = document.getElementById("m");
          const elS = document.getElementById("s");

          // 5. 将数字转图片
          elH.innerHTML = String(H)
            .split("")
            .reduce((str, el) => {
              str += `<img src="./imgs/countdown${el}.png" alt="">`;
              return str;
            }, "");
          elM.innerHTML = String(M)
            .split("")
            .reduce((str, el) => {
              str += `<img src="./imgs/countdown${el}.png" alt="">`;
              return str;
            }, "");
          elS.innerHTML = String(S)
            .split("")
            .reduce((str, el) => {
              str += `<img src="./imgs/countdown${el}.png" alt="">`;
              return str;
            }, "");
        }, 1000);
      }

      clock(document.getElementById("clock"));
    </script>
  </body>
</html>
